<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<child :content="'hello world'"></child>
		</div>
	</body>
	<script>
		Vue.component("Child", {
			// 普通传值
			// props: ['content'],

			// 限定父传参的类型,这时必须要用v-bind绑定属性才能校验,因为这时引号内的是一个表达式,不加v-bind,引号内表示一个字符串
			// 			props: {
			// 				content: String,
			// 			},
			// 限定多种类型:
			// 			props: {
			// 				content: [String, Number],
			// 			}

			// 多重限定,可以限定类型,是否必传,默认值
			// 			props: {
			// 				content: {
			// 					type: String, // 父传递数据类型
			// 					required: true, // 是否必传
			// 					default: '默认值' // 未传值时显示的值
			// 				}
			// 			},
			
			// 自定义校验 validator回调函数
			props:{
				content: {
					type: String,
					validator: function(value){
						return (value.length > 5);
					}
				}	
			},
			template: '<div>{{content}}</div>'
		})



		var app = new Vue({
			el: "#app"
		})
	</script>
</html>
